import React,{useState} from 'react'
import('./login.less')
import { Tabs, Button, Checkbox, Form, Input, Space, Typography,message } from 'antd';
import { loginApi } from '../../apis/login';
import {useNavigate} from 'react-router-dom'
const { Text, Link } = Typography;
const onChange = (key: string) => {

};
export default function Login() {
    const navigate = useNavigate()
    const [loading, setLoading] = useState(false)
    const onFinish = (values: any) => {
        setLoading(true)
       try {
        loginApi(values).then(res => {
            if (res) {
                message.success(res.message)
                setLoading(false)
                
                const{token,user}=res.data
                localStorage.token = token
                localStorage.userInfo = JSON.stringify(user)
                setTimeout(() => {
                    navigate("/nav/home", { replace: true })
                }, 2000);
           }
            
        }).catch(err => {
           setLoading(false)
       })
       } catch (error) {
        setLoading(false)
       }
    };
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div className='login-container'>
            <div className="formContainer">
                <div className="formHeader">
                    <img src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt="" />
                    <span>赤兔养车</span>
                </div>
                <Tabs
                    defaultActiveKey="1"
                    onChange={onChange}
                    tabBarStyle={{ paddingLeft: 150 }}
                    size='large'
                    items={[
                        {
                            label: `账号密码登录`,
                            key: '1',
                            children: (
                                <div className='login'>
                                    <Form
                                        name="basic"
                                        labelCol={{ span: 8 }}
                                        wrapperCol={{ span: 16 }}
                                        initialValues={{ remember: true }}
                                        onFinish={onFinish}
                                        onFinishFailed={onFinishFailed}
                                        autoComplete="off"
                                        className='loginForm'
                                    >
                                        <Form.Item
                                            name="username"
                                            rules={[{ required: true, message: '请输入账户名' }]}
                                        >
                                            <Input className='Input' />
                                        </Form.Item>

                                        <Form.Item
                                            name="password"
                                            rules={[{ required: true, message: '请输入密码' }]}
                                        >
                                            <Input.Password className='Input' />
                                        </Form.Item>
                                        <Form.Item >
                                            <Button type="primary" htmlType="submit" className='subMit' loading={loading}>
                                                登录
                                            </Button>
                                        </Form.Item>
                                    </Form>
                                    <div className="formBottom">
                                        <Link href="https://ant.design" target="_blank">
                                            注册账户
                                        </Link>
                                        <Link href="https://ant.design" target="_blank">
                                            商家入驻 
                                        </Link>

                                    </div>
                                </div>
                            ),
                        },
                        {
                            label: `手机号登录`,
                            key: '2',
                            children: `Content of Tab Pane 2`,
                        },

                    ]}
                />
            </div>

        </div>
    )
}
